<template>
  <div ref="wrapRef" style="width: 262px; height: 171px"></div>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';

import { useScript } from '/@/hooks/web/useScript';

const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=35b11c90308c1e231bdfff268f9d0bfd';

export default defineComponent({
  name: 'AMap',
  props: {
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: 'calc(100vh - 78px)',
    },
    mapData: {
      type: Object,
      default: {
        longitude: '117.212887',
        latitude: '39.094098'
      },

    }
  },
  setup(props) {
    const wrapRef = ref<HTMLDivElement | null>(null);
    const { toPromise } = useScript({ src: A_MAP_URL });
    async function initMap() {
      await toPromise();
      await nextTick();
      const wrapEl = unref(wrapRef);
      if (!wrapEl) return;
      const AMap = (window as any).AMap;
      const longlat = [props.mapData.longitude, props.mapData.latitude]
      console.log('接受的地图经纬度longlat', longlat);

      var map= new AMap.Map(wrapEl, {
        zoom: 11,
        center: longlat,
        viewMode: '3D',
      });
      var marker = new AMap.Marker({
        position: new AMap.LngLat(props.mapData.longitude,props.mapData.latitude),
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        offset: new AMap.Pixel(-13, -30)
    });
    marker.setLabel({
        direction:'bottom',
        offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
        content: "<div class='info'>"+props.mapData.stationName+"</div>", //设置文本标注内容
    });
    map.add(marker);
    // marker.setMap(map);

    }

    onMounted(() => {
      console.log('props 地图传入数据', props.mapData);

      initMap();
    });

    return { wrapRef };
  },
});
</script>
